<template>
  <div class="hello">
      <h2 @click="mouseupEntity()" v-for="(cell,index) in demoStr"  v-html="cell.contentShow" :key="index">{{cell.contentShow}}</h2>
      <h2 @click="mouseupEntity()"><button>123456789</button>划词测试11111111aaaa划词</h2>
      <h2 @click="mouseupEntity()"><button>123456789</button>划词测试111111<button>划词测试</button>11aaaa划词</h2>
      <div id="classSelctBox">
          
      </div>
      <div id="handle-box">
          <el-button type="primary" round :disabled="startDisabled" @click="startCall">开始</el-button>
          <el-button type="warning" round  @click="endCall">停止</el-button>
      </div>
      <div id="activeName">{{activeName}}</div>
      <div id="name-box">
          <ul>
              <li v-for="item in nameList" :key="item" v-html="item">{{item}}</li>
          </ul>
      </div>
      
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      demoStr: [
        {
          content: "我是语料，我需要被划词",
          contentShow: "我是语料，我需要被划词",
          seat: [[1, 3], [5, 8]]
        },
        {
          content: "这个词不好划啊，可不可以不划词",
          contentShow: "这个词不好划啊，可不可以不划词",
          seat: [[1, 3], [5, 8], [9, 10]]
        }
      ],
      modal: { show: null },
      selectText: "",
      startIndex: "",
      btnStrObj: {
        pre: "<button>",
        after: "</button>"
      },
      endIndex: "",
      nameList: ["aaa", "bbb", "ccc", "ddd", "eee", "fff"],
      nameListStr: ["aaa", "bbb", "ccc", "ddd", "eee", "fff"],
      activeName: "",
      activeIndex: null,
      startDisabled: false,
      timer: null
    };
  },
  methods: {
    //开始
    startCall() {
      this.timer = setInterval(() => {
        this.startDisabled = true;
        this.activeIndex = Math.floor(Math.random() * this.nameList.length);
        this.activeName = this.nameListStr[this.activeIndex];
        this.nameList = [...this.nameListStr];
        this.nameList[this.activeIndex] =
          '<span style="color:red">' +
          this.nameListStr[this.activeIndex] +
          "</span>";
      }, 200);
    },
    //停止
    endCall() {
      clearInterval(this.timer);
      this.startDisabled = false;
    },
    // 选中语料 时间
    mouseupEntity(ev) {
      let selectObj = window.getSelection();
      let selectText = selectObj.toString();
      //划词添加标签

      console.log(selectObj);
      console.log(selectObj.toString());

      let rangeObj = selectObj.getRangeAt(0);
      console.log(rangeObj);
      let ele = rangeObj.commonAncestorContainer;
      let words = "";

      if (selectText.length > 0) {
        this.modal.show = true;
        this.selectText = selectText;
        while (true) {
          if (ele.previousSibling == null) {
            break;
          }
          words += ele.previousSibling.textContent;
          ele = ele.previousSibling;
        }
        console.log(words);
        this.startIndex = words.length + rangeObj.startOffset;
        this.endIndex = words.length + rangeObj.endOffset;
      }
    },

    //插入字符串操作
    insertString(originalString, targetString, index) {
      return (
        originalString.substring(0, index) +
        targetString +
        originalString.substring(index, originalString.length)
      );
    }
  },
  mounted() {
    //回显划词结果
    this.demoStr.forEach((item, ind) => {
      item.seat.forEach((cell, index) => {
        item.contentShow = this.insertString(
          item.contentShow,
          this.btnStrObj.pre,
          cell[0] +
            index * (this.btnStrObj.pre.length + this.btnStrObj.after.length)
        );
        item.contentShow = this.insertString(
          item.contentShow,
          this.btnStrObj.after,
          cell[1] +
            8 +
            index * (this.btnStrObj.pre.length + this.btnStrObj.after.length)
        );
      });
    });
    // this.nameList.forEach(item => {
    //   this.nameListStr.push('<span style="color:red">' + item + "</span>");
    // });
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style  lang="less">
h2 {
  span {
    color: red;
  }
  button {
    background-color: rgba(123, 222, 123, 0.4);
    border: none;
    height: 50px;
    line-height: 50px;
    font-size: 30px;
  }
}
.hello {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  #name-box {
    display: flex;
    justify-content: space-around;
    ul {
      flex: none;
      width: 1000px;
      display: flex;
      justify-content: flex-start;
      border: solid 1px #cccccc;
      list-style-type: none;
      padding: 0;
      //background-image: url("./../assets/timg.jpg");
      background-repeat: no-repeat;
      background-size: cover;
      height: 600px;
      li {
        width: 100px;
        height: 100px;
        line-height: 100px;
      }
    }
  }
}
</style>
